<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        配置选课
      </div>
      <div>
        <el-form :disabled="!editMode">
          <el-form-item label="当前学年">
            <el-input v-model="formData.nowYear" type="number" disabled />
          </el-form-item>
          <el-form-item label="当前学期">
            <el-input v-model="formData.nowTermName" disabled />
          </el-form-item>
          <el-form-item label="开放选课">
            <el-switch v-model="formData.enableChoose" />
          </el-form-item>
          <div v-if="formData.enableChoose">
            <el-form-item label="选课开始时间">
              <el-date-picker
                v-model="formData.startTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
            <el-form-item label="选课结束时间">
              <el-date-picker
                v-model="formData.endTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </div>
        </el-form>
        <el-form>
          <el-form-item v-if="!editMode">
            <el-button type="success" @click="openEditMode">编辑</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button @click="cancelEdit">取消修改</el-button>
            <el-button type="primary" @click="submitEdit">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>

import { getConfig, editConfig } from '@/api/ms/course/courseChoose/chooseConfig'

export default {
  name: 'ChooseSwitch',
  data() {
    return {
      nowTermName: '第二学期',
      formData: {
        nowYear: 2023,
        nowTerm: 2,
        nowTermName: '第二学期',
        enableChoose: false,
        startTime: '2023-03-05 10:00:00',
        endTime: '2023-03-12 10:00:00'
      },
      editMode: false
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      getConfig().then(({ data }) => {
        this.formData = data
      }).catch(() => {})
    },
    openEditMode() {
      this.editMode = true
    },
    cancelEdit() {
      this.editMode = false
      this.refreshData()
    },
    submitEdit() {
      const reqData = {
        enableChoose: this.formData.enableChoose,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime
      }
      if (reqData.enableChoose) {
        if (reqData.startTime >= reqData.endTime) {
          this.$message.error('开始时间不能晚于结束时间')
          return
        }
      }

      if (!reqData.enableChoose) {
        reqData.startTime = null
        reqData.endTime = null
      }
      editConfig(reqData).then(({ message }) => {
        this.$message.success(message)
        this.cancelEdit()
      }).catch(() => {})
    }
  }
}
</script>

<style>

</style>
